<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<el-select
						size="mini"
						v-model="selects.type"
						placeholder="请选择活动类型"
						filterable
						style="margin-left: 10px"
						@change="
						val => {
							refresh({ type: val });
						}
					"
				>
					<el-option label="全部" value></el-option>
					<el-option
							:label="item.label"
							:value="item.id"
							v-for="(item, index) in options.type"
							:key="index"
					></el-option>
				</el-select>
				<el-select
						size="mini"
						v-model="selects.tinyint"
						placeholder="请选择推送类型"
						filterable
						style="margin-left: 10px"
						@change="
						val => {
							refresh({ tinyint: val });
						}
					"
				>
					<el-option label="全部" value></el-option>
					<el-option
							:label="item.label"
							:value="item.id"
							v-for="(item, index) in options.tinyint"
							:key="index"
					></el-option>
				</el-select>
			</template>
			<template #table-column-icon="{scope}">
				<img :src="scope.row.icon" class="table-icon" />
			</template>
			<template #table-column-type="{scope}">
				<el-tag v-if="scope.row.type == 1">活动消息</el-tag>
				<el-tag v-if="scope.row.type == 2">标签消息</el-tag>
				<el-tag v-if="scope.row.type == 3">签到消息</el-tag>
				<el-tag v-if="scope.row.type == 4">标签词库消息</el-tag>
				<el-tag v-if="scope.row.type == 5">首次查询消息</el-tag>
				<el-tag v-if="scope.row.type == 6">签到成功消息</el-tag>
				<el-tag v-if="scope.row.type == 7">提现消息</el-tag>
				<el-tag v-if="scope.row.type == 8">退货维权消息</el-tag>
				<el-tag v-if="scope.row.type == 9">下单确认收货消息</el-tag>
				<el-tag v-if="scope.row.type == 10">订单绑定失败消息</el-tag>
			</template>

			<template #table-column-tinyint="{scope}">
				<el-tag type="success" v-if="scope.row.tinyint == 0">预设时间</el-tag>
				<el-tag type="success" v-if="scope.row.tinyint == 1">立即推送</el-tag>
				<el-tag type="success" v-if="scope.row.tinyint == 2">每日推送</el-tag>
				<el-tag type="success" v-if="scope.row.tinyint == 3">触发推送</el-tag>
			</template>

			<template #table-column-isDisplay="{scope}">
				<el-tag type="success" v-if="scope.row.isDisplay === 0">否</el-tag>
				<el-tag type="success" v-if="scope.row.isDisplay === 1">是</el-tag>
			</template>

			<template #table-column-pushTime="{scope}">
				<span v-if="scope.row.tinyint == 2">{{ scope.row.pushTime | timeSplite}}</span>
				<span v-else-if="scope.row.tinyint == 3">触发时</span>
				<span v-else>{{ scope.row.pushTime === null ? '未设定' : scope.row.pushTime }}</span>
			</template>

			<template #table-column-openRate="{scope}">
				<span v-if="scope.row.openCount > 0">{{ ((scope.row.openCount / scope.row.pushEquipmentCount) * 100).toFixed(2) }}%</span>
				<span v-else>0.00%</span>
			</template>

			<template #table-column-pushErr="{scope}">
				<el-button type="text" style="color: red" @click="showDialog(scope.row.id)">查看</el-button>
			</template>

			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 0">禁用</el-tag>
				<el-tag type="success" v-else-if="scope.row.status == 1">启用</el-tag>
			</template>
		</cl-crud>

		<push-dig ref="pushDig"></push-dig>
	</div>
</template>

<script>
import platform from '@/mixin/platform';
import moment from 'moment';
import PushDig from './components/push-dig'

export default {
	components: { PushDig },
	data() {
		return {
			crud: null,
			options: {
				type: [
					{
						id: 1,
						label: '活动消息'
					},
					{
						id: 2,
						label: '标签消息'
					},
					{
						id: 3,
						label: '签到消息'
					},
					{
						id: 4,
						label: '标签词库消息'
					},
					{
						id: 5,
						label: '首次查询消息'
					},
					{
						id: 6,
						label: '签到成功消息'
					},
					{
						id: 7,
						label: '提现消息'
					},
					{
						id: 8,
						label: '退货维权消息'
					},
					{
						id: 9,
						label: '下单确认收货消息'
					},
					{
						id: 10,
						label: '订单绑定失败消息'
					}
				],
				tinyint: [
					{
						id: 0,
						label: '预设时间'
					},
					{
						id: 1,
						label: '立即推送'
					},
					{
						id: 2,
						label: '每日推送'
					},
					{
						id: 3,
						label: '触发推送'
					}
				]
			},
			selects: {}
		};
	},

	mixins: [platform],
	created() {
		this.getLabelList();
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.msgList.msgList)
				.set('dict', {
					label: {
						add: '创建消息'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: 'LOGO',
							prop: 'icon',
							align: 'center',
							minWidth: 100
						},
						{
							label: '标题',
							prop: 'title',
							align: 'center',
							minWidth: 100
						},
						{
							label: '内容',
							prop: 'content',
							align: 'center',
							minWidth: 200
						},
						{
							label: '跳转路径',
							prop: 'jumpUrl',
							align: 'center',
							minWidth: 200
						},
						{
							label: '是否前端显示',
							prop: 'isDisplay',
							align: 'center',
							minWidth: 200
						},
						{
							label: '标签',
							prop: 'label',
							align: 'center',
							minWidth: 80
						},
						{
							label: '活动类型',
							prop: 'type',
							align: 'center',
							minWidth: 150
						},
						{
							label: '推送类型',
							prop: 'tinyint',
							align: 'center',
							minWidth: 150
						},
						{
							label: '推送时间',
							prop: 'pushTime',
							align: 'center',
							minWidth: 100
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							minWidth: 100
						},
						{
							label: '覆盖用户',
							prop: 'pushEquipmentCount',
							align: 'center'
						},
						{
							label: '打开用户',
							prop: 'openCount',
							align: 'center',
							emptyText: 0
						},
						{
							label: '打开率',
							prop: 'openRate',
							align: 'center'
						},
						{
							label: '未打开用户',
							prop: 'pushErr',
							align: 'center',
							minWidth: 100
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '是否启用',
							prop: 'status',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: 'LOGO',
							prop: 'icon',
							span: 24,
							component: {
								name: 'cl-upload'
							}
						},
						{
							label: '标题',
							prop: 'title',
							span: 15,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入标题'
								}
							},
							rules: {
								required: true,
								message: '请输入标题'
							}
						},
						{
							label: '活动类型',
							prop: 'type',
							span: 8,
							value: 1,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								props: {
									clearable: true
								},
								options: [
									{
										label: '活动消息',
										value: 1
									},
									{
										label: '标签消息',
										value: 2
									},
									{
										label: '签到提醒',
										value: 3
									},
									{
										label: '标签词库消息',
										value: 4,
										props: {
											disabled: true
										}
									},
									{
										label: '首次查询消息',
										value: 5
									},
									{
										label: '签到成功消息',
										value: 6
									},
									{
										label: '提现消息',
										value: 7
									},
									{
										label: '退货维权消息',
										value: 8
									},
									{
										label: '下单确认收货消息',
										value: 9
									},
									{
										label: '订单绑定失败消息',
										value: 10
									}
								],
								on: {
									change(val) {
										if (val === 2) {
											app.hiddenItem('label', false);
										} else {
											app.hiddenItem('label', true);
										}
									}
								}
							},
							rules: {
								required: true,
								message: '任务类型不能为空'
							}
						},
						{
							label: '内容',
							prop: 'content',
							span: 24,
							component: {
								name: 'el-input-content',
								data() {
									return {
										value2: ''
									};
								},
								watch: {
									value(val) {
										this.value2 = val;
									}
								},
								props: {
									value: [String, Number]
								},
								methods: {
									Click(val) {
										this.value2 += val.target.dataset.val;
									},
									input(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<div>
											<el-input
												rows={8}
												type="textarea"
												onInput={this.input}
												v-model={this.value2}></el-input>
										</div>
									);
								}
							},
							rules: {
								required: true,
								message: '请输入内容'
							}
						},
						{
							label: '跳转链接',
							prop: 'jumpUrl',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入跳转链接'
								}
							}
						},
						{
							label: '是否前端显示',
							prop: 'isDisplay',
							value: true,
							span: 24,
							component: {
								name: 'el-switch'
							},
							rules: {
								required: true,
								message: '请选择是否前端显示'
							}
						},
						{
							prop: 'tinyint',
							label: '推送类型',
							span: 12,
							value: 1,
							component: {
								name: 'el-select',
								options: [
									{
										label: '预设时间',
										value: 0
									},
									{
										label: '立即推送',
										value: 1
									},
									{
										label: '每日推送',
										value: 2
									},
									{
										label: '触发推送',
										value: 3
									}
								]
							},
							rules: [
								{
									validator: (rules, value, callback) => {
										if (value == 0) {
											app.hiddenItem('pushTime', false);
										} else {
											app.hiddenItem('pushTime', true);
										}
										if (value == 2) {
											app.hiddenItem('cron', false);
										} else {
											app.hiddenItem('cron', true);
										}
										callback();
									}
								}
							]
						},
						{
							hidden: true,
							label: '推送标签',
							prop: 'label',
							span: 11,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择标签'
								},
								props: {
									clearable: true
								},
								options: []
							},
							rules: {
								required: true,
								message: '推送标签不能为空'
							}
						},
						{
							prop: 'pushTime',
							label: '预设时间',
							span: 11,
							hidden: true,
							value: moment().format('YYYY-MM-DD HH:mm:ss'),
							component: {
								name: 'el-date-picker',
								props: {
									type: 'datetime',
									'value-format': 'yyyy-MM-dd HH:mm:ss'
								}
							},
							rules: [
								{
									validator: (rules, value, callback) => {
										const h = app.getData('upsert.form.hour') || 0;
										if (
											moment(value)
												.add(h, 'hour')
												.isBefore(moment())
										) {
											callback(new Error('推送时间不能小于当前时间'));
										} else {
											callback();
										}
									}
								}
							]
						},
						{
							prop: 'cron',
							label: '推送时间',
							span: 11,
							hidden: true,
							value: moment().format('HH:mm:ss'),
							component: {
								name: 'el-time-picker',
								props: {
									'value-format': 'HH:mm:ss'
								}
							},
							rules: {
								required: true,
								message: '推送时间'
							}
						},
						{
							label: '备注',
							prop: 'remark',
							span: 23,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入备注'
								}
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						}
					]
				})
				.on('open', isEdit => {
					if (!isEdit) {
						app.setData('upsert.items[prop:pushTime].hidden', true);
					}
					app.setData('upsert.items[prop:label].component.options', this.options.label);
					app.hiddenItem('label', true);
					app.hiddenItem('pushTime', true);
					app.hiddenItem('cron', true);
				})
					.on('submit', (isEdit, data, { next }) => {
						if (data.tinyint === 2) {
							data.pushTime = moment().format('YYYY-MM-DD') + ' ' + data.cron
						}
						if (data.tinyint === 3) {
							data.pushTime = null
						}
						if (!data.isDisplay) {
							data.isDisplay = 0;
						} else {
							data.isDisplay = 1;
						}
						next({
							...data,
						});
					})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		// 获取标签列表
		getLabelList() {
			this.$service.msgList.user.labelList().then(res => {
				let arr = [];
				res.forEach(item => {
					arr.push({
						label: item,
						value: item
					});
				});
				this.options.label = arr;
			});
		},
		// 查看失败用户
		showDialog(id) {
			this.$refs.pushDig.open(id);
		}
	},
	filters: {
		timeSplite(val) {
			return moment(val).format('HH:mm:ss');
		}
	}
};
</script>
<style lang="stylus" scoped>
.table-icon {
	width: 70px;
	height: auto;
}
</style>
